import { useState } from 'react';
import { Image, ImageViewer } from 'antd-mobile';

interface PropsType {
  msgContent: {
    pic: string;
    height: number;
    width: number;
  }
}

export default function(props: PropsType) {
  const { pic, height, width } = props.msgContent;
  const [touchStartTime, setTouchStartTime] = useState();

  const showImage = (e) => {
    ImageViewer.show({ image: pic });
    e.stopPropagation();
  }

  const handleTouchStart = () => {
    setTouchStartTime(+new Date())
  }

  const handleTouchEnd = (e) => {
    if (+new Date() - touchStartTime < 200) {
      // ImageViewer.show({ image: pic });
      e.stopPropagation();
    }
  }

  return <Image style={{ maxHeight: '250px', maxWidth: '100%'}} width={width} height={height} lazy src={pic} />;
}